<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>key的原理与作用</title>
    <script src="../js/vue.js"></script>
</head>
<body>
  <div id="root">
      <h1>渲染数组</h1>
      <button @click.once="add">点我添加老刘</button>
<!--      当打乱顺序时 新虚拟dom和对比原来的虚拟dom 然后添加或者保留数据 （一样的保留 不一样的替换 或者添加）
          如果这时用index就会打乱顺序 从而虚拟dom混乱 也会打乱 真实dom的渲染
 -->
      <li v-for="(p,index) in persons" :key="p.id">
          {{p.name}}-{{p.age}} <input type="text">
      </li>
  </div>
  <script>
    Vue.config.devtools = true;
    Vue.config.productionTip = false;
    new Vue({
      el:'#root',
        data: {
            persons: [
                {id: '001', name: '张三', age: 18},
                {id: '002', name: '李四', age: 19},
                {id: '003', name: '王五', age: 20}
            ],
        },
        methods: {
          add() {
              let p = {id:'004',name:'老刘',age:40};
              this.persons.unshift(p);
          }
        }
    });
  </script>
</body>
</html>